<script setup lang="ts">
import { ArrowLeftBold, ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ref, computed } from 'vue';
import axios from 'axios';
const router = useRouter()
let user = ref(JSON.parse(localStorage.getItem('user') || '{}'))
let password = ref('')
let newpassword = ref('')
let update = async (id:string)=>{
    await axios.get('http://localhost:3000/yg/updatepassword',{params:{id:id,password:newpassword.value}})
    alert('修改成功')
    router.push('/login')
}
</script>
<template>
    <div id="change">
        <div class="top">
            <el-icon @click="router.back()">
                <ArrowLeftBold />
            </el-icon>
            <h3 style="margin: 0 auto">修改密码</h3>
        </div>
        <main>
            <input class="a" type="password" v-model="password" placeholder="请输入原密码">
            <input class="a" type="password" v-model="newpassword" placeholder="请输入新密码" >
            <div style="width: 200px;height: 45px;margin: 0 auto;margin-top: 20px;">
                <button @click="update(user._id)" style="width: 200px; height: 40px;background-color: skyblue;color: #fff;border-radius: 20px;border: none;">更改密码</button>
            </div>
        </main>
    </div>
</template>



<style scoped lang="scss">
#change {
    width: 100%;
    height: 100%;

    .top {
        width: 100%;
        height: 30px;
        display: flex;
    }

    main {
        width: 100%;
        height: 800px;
        background-color: #fff;
        .a{
            width: 100%;
            height: 30px;
            margin-bottom: 20px;
        }
    }

}
</style>